<template>
  <el-select
    :size="size"
    filterable
    :filter-method="filterFunc"
    :value="value"
    @change="change"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item[labelProp]"
      :value="item[valueProp]"
    ></el-option>
  </el-select>
</template>

<script>
import { debounce } from "@/utils/index";
export default {
  model: {
    prop: "value",
    event: "onChange",
  },
  props: {
    size: {
      type: String,
      default: "small",
    },
    search: {
      type: Function,
      default: () => {},
    },
    options: {
      type: Array,
      default: () => [],
    },
    optionProp: {
      type: Object,
      default: () => ({
        label: "label",
        value: "value",
      }),
    },
    value: [String, Number],
  },
  computed: {
    labelProp() {
      return this.optionProp.label;
    },
    valueProp() {
      return this.optionProp.value;
    },
  },
  data() {
    return {
      filterFunc: () => {},
    };
  },
  created() {
    this.filterFunc = debounce(this.search);
  },
  methods: {
    change(value) {
      this.$emit("onChange", value);
    },
  },
};
</script>

<style>
</style>